<template>
  <view class="box">
   <view class="box-bg" v-for="(i,index) in songList" :key="index">
     <view class="box-bg-title">
       <text>{{i.al.name}}</text>
     </view>
     <image :src="i.al.picUrl"></image>
   </view>
  <view class="box-swiper">
     <swiper class="boxx-swiper">
       <swiper-item v-for="(is,index) in songList" :key="index">
         <view class="swiper-item">
          <image :src="is.al.picUrl"></image>
         </view>
         <view class="box-slider">
           <view class="box-slider-left">0:00</view>
            <view class="box-slider-center">
              <slider value="66" step="1" @change=""/></view>
           <view class="box-slider-right">6:66</view>
         </view>
         <view class="box-control">
           <view class="box-control-left">
             <image src="../../static/上一首.png"></image>
           </view>
           <view class="box-control-enter" @click="playTo">
             <image :src="playAdress" ></image>
           </view>
           <view class="box-control-right">
             <image src="../../static/下一首.png"></image>
           </view>
         </view>
       </swiper-item>
       <swiper-item>
         <view class="swiper-item">
          <scroll-view scroll-y="true" class="box-geci" >
            <view class="box-geci-item" v-for="(ge,index) in songLrcs" :key="index">{{ge.geci}}</view>
          </scroll-view> 
         </view>
       </swiper-item>
     </swiper>
   </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        img:'',
        ids:'',
        songList:[],
        playAdress:'../../static/开始.png',
        lyricList:'',
        songLrcs:[]
          
      }
    },
    onLoad(options){
      this.ids= options.id
      this.getSongDetail()
      this.getSongUrl()
      this.getSongLyric()
    },
    methods: {
     async getSongDetail(){
        let result = await uni.$http.get('/song/detail?ids='+this.ids)
        if(result.data.code==200){
          this.songList = result.data.songs
        }
      },
     async getSongUrl(){
        let result = await uni.$http.get('/song/url?id='+this.ids)
        if(result.data.code==200){
          this.audios = uni.createInnerAudioContext()
          this.audios.src=result.data.data[0].url
          this.audios.onPlay(()=>{
          this.playAdress = '../../static/暂停.png'
          })
          this.audios.onPause(() =>{
            this.playAdress = '../../static/开始.png'
          })
        }
      },
     async getSongLyric(){
        let {data:result} = await uni.$http.get('/lyric?id='+this.ids)
        if(result.code==200){
          this.lyricList = result.lrc.lyric
          this.songLrc(this.lyricList)
        }
      },
      playTo(){
        if(this.audios.paused){
          this.audios.play()
        }
        else{
          this.audios.pause()
        }
      },
      songLrc(lrc){
   let res = /\[([^\]]+)\]([^\[]+)/g
    var result =[]
    lrc.replace(res,function($0,$1,$2){
      result.push({"time" : $1,"geci":$2})
    })
    this.songLrcs = result
      }
    }
  }
</script>

<style>
  .box-bg{
   position:relative;
    width:100%;
  }
  .box-bg-title{
  position:absolute;
    top:136rpx;
    left:156rpx;
    width: 460rpx;
    font-size:56rpx;
    color:#161616;
    text-align: center;
    z-index:2;
  }
.box-bg image{
   width:100%;
   height: 92.5vh;
   opacity: 0.6;
}
.box-swiper{
  margin-top:-1266rpx;
  margin-left:1%;
  z-index:3;
}
.boxx-swiper{
  height:1212rpx;
}
.swiper-item image{
  width:300rpx;
  height:300rpx;
  margin:290rpx 186rpx;
  border-radius: 50%;
  border: 66rpx solid #161616;
  z-index:6;
  animation: demo 18s linear infinite;
}
.box-slider{
  display:flex;
  justify-content: space-between;
  position:absolute;
  top:1100rpx;
  left:-12rpx;
  width:100%;
  height:100rpx;
  line-height: 100rpx;
 background:#8b898a;
 opacity: .8;
}
.box-slider-center slider{
  width:560rpx;
  margin-top:36rpx;
  margin-right:30rpx;
  /* background:red; */
}
.box-slider-left,
.box-slider-right{
  font-size:29rpx;
  font-weight: 800;
}
.box-slider-left{
  margin-left:9rpx;
  margin-top:6rpx;
}
.box-slider-right{
    margin-top:6rpx;
    margin-right:32rpx;
}
.box-control{
  display:flex;
  justify-content: space-around;
  margin-top:-151rpx;
  margin-left:4%;
  z-index:3;
}
.box-control image{
  width:100rpx;
  height:100rpx;
}
.box-geci{
  width: 100%;
  height:1200rpx;
  /* background:pink; */
  margin-top:66rpx;
  margin-left:-8rpx;
}
.box-geci-item{
  margin-top:23rpx;
  font-size:36rpx;
  font-weight:600;
  text-align:center;
}
.box-edd{
  margin:166rpx;
  z-index: 3;
}
@keyframes demo {
  0%{
    transform: rotate(0deg);
    }
    100%{
      transform: rotate(360deg);
    }
}
.geci{
  
}

</style>
